<?php
// 检查是否已安装系统
if (!file_exists('../install.lock')) {
    // 如果未安装，跳转到安装页面
    header('Location: ../install.php');
    exit;
}

// 获取系统设置
require_once '../functions.php';
$settings = getSystemSettings();
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单自主查询系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#667eea',
                        secondary: '#764ba2',
                        success: '#4CAF50',
                        warning: '#FFC107',
                        error: '#f44336',
                        'light-gray': '#f8f9fa',
                        'medium-gray': '#e9ecef',
                        'dark-gray': '#6c757d',
                        'text-color': '#2c3e50'
                    },
                    fontFamily: {
                        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            }
            .text-shadow {
                text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            }
            .timeline-connector {
                @apply absolute left-[13px] top-0 h-full w-[2px] bg-medium-gray;
            }
            .timeline-dot {
                @apply absolute left-[-35px] top-[6px] w-[12px] h-[12px] rounded-full bg-primary border-[3px] border-white shadow-[0_0_0_2px_rgba(233,236,239,1)];
            }
            .timeline-dot-first {
                @apply bg-success;
            }
            .timeline-arrow {
                @apply absolute left-[-8px] top-[15px] w-0 h-0 border-[8px] border-transparent;
                border-right-color: inherit;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .btn-hover {
                @apply transition-all duration-300 hover:shadow-md hover:-translate-y-1 active:translate-y-0;
            }
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <nav class="bg-white shadow-sm sticky top-0 z-10">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex items-center">
                <div class="flex-shrink-0 flex items-center">
                    <i class="fas fa-shipping-fast text-primary text-2xl mr-2"></i>
                    <span class="font-bold text-xl text-text-color">订单自主查询系统</span>
                </div>
            </div>
            <div class="flex items-center space-x-4">
                <!-- 桌面端菜单 -->
                <div class="hidden md:flex items-center space-x-4">
                    <a href="#help" class="text-gray-600 hover:text-primary transition-colors">
                        <i class="fas fa-question-circle mr-1"></i> 使用帮助
                    </a>
                    <a href="#contact" class="text-gray-600 hover:text-primary transition-colors">
                        <i class="fas fa-headset mr-1"></i> 联系我们
                    </a>
                </div>
                
                <!-- 移动端菜单 -->
                <div class="md:hidden">
                    <button type="button" class="mobile-menu-button p-2 rounded-md text-gray-600 hover:text-primary hover:bg-gray-100 transition-colors">
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                    <!-- 移动端菜单内容 -->
                    <div class="mobile-menu hidden bg-white shadow-lg rounded-lg mt-2 p-4 absolute right-4 z-20">
                        <a href="#help" class="block px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-md transition-colors">
                            <i class="fas fa-question-circle mr-2"></i> 使用帮助
                        </a>
                        <a href="#contact" class="block px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-md transition-colors">
                            <i class="fas fa-headset mr-2"></i> 联系我们
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>

    <!-- 头部区域 -->
    <header class="bg-gradient-primary pt-16 pb-24 text-white relative overflow-hidden">
        <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z" fill="white" fill-opacity="0.05" fill-rule="evenodd"/%3E%3C/svg%3E')];
        </div>
        <div class="container mx-auto px-4 relative z-10">
            <div class="text-center max-w-3xl mx-auto">
                <div class="text-center max-w-3xl mx-auto">
                    <!-- Logo显示区域 -->
                    <div class="flex justify-center mb-6">
                        <img id="site-logo" src="<?php echo isset($settings['logo']) && !empty($settings['logo']) ? htmlspecialchars($settings['logo']) : 'https://free.picui.cn/free/2025/08/18/68a221142a869.png'; ?>" alt="订单自主查询系统Logo" style="max-width: 100%; height: auto; max-height: 120px;">
                    </div>
                    <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold mb-4 text-shadow">
                        快速查询您的快递信息
                    </h1>
                <p class="text-xl opacity-90 mb-8">
                    输入姓名、手机号、订单号或快递单号，一键获取最新物流状态
                </p>
            </div>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="flex-grow container mx-auto px-4 py-6">
        <!-- 搜索区域 - 卡片式设计 -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-8 -mt-16 relative z-20 card-hover">
            <form class="search-form" method="post" action="">
                <div class="flex flex-col md:flex-row gap-4">
                    <div class="relative flex-grow">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-4 text-gray-500">
                            <i class="fas fa-search"></i>
                        </span>
                        <input 
                            type="text" 
                            name="query" 
                            class="w-full pl-12 pr-4 py-4 border-2 border-medium-gray rounded-lg text-lg focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all bg-light-gray placeholder-gray-400"
                            placeholder="请输入姓名、手机号、订单号或快递单号"
                            required
                            autocomplete="off"
                        >
                    </div>
                    <button 
                        type="submit" 
                        class="search-btn bg-gradient-primary text-white px-8 py-4 rounded-lg text-lg font-semibold btn-hover whitespace-nowrap flex items-center justify-center min-w-[140px]"
                        id="searchButton"
                    >
                        <i class="fas fa-search mr-2"></i> 立即查询
                    </button>
                </div>
                <div class="mt-4 text-center text-sm text-dark-gray">
                    <i class="fas fa-info-circle mr-1"></i> 支持多种查询方式，快速获取最新物流信息
                </div>
            </form>
        </div>

        <!-- 查询结果区域 -->
        <div class="results-section" id="resultsSection">
            <?php
            require_once '../functions.php';
            
            if ($_SERVER['REQUEST_METHOD'] == 'POST' && !empty($_POST['query'])) {
                $queryValue = trim($_POST['query']);
                
                // 获取完整的收件人和快递信息
                $trackingInfoList = getCompleteTrackingInfoByQuery($queryValue);
                
                if (empty($trackingInfoList)) {
                    echo '    <div class="bg-white rounded-xl p-6 mb-8 border-l-4 border-error">
                        <div class="flex items-start">
                            <div class="text-error mr-4">
                                <i class="fas fa-exclamation-circle text-2xl"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg text-error mb-2">未找到相关信息</h3>
                                <p class="text-gray-600">请检查您输入的姓名、手机号、订单号或快递单号是否正确，或稍后再试</p>
                            </div>
                        </div>
                    </div>';
                } else {
                    // 保存查询记录
                    $queryType = is_numeric($queryValue) && strlen($queryValue) == 11 ? 'phone' : 
                                 (strlen($queryValue) > 10 ? 'tracking_number' : 
                                 (preg_match('/^\d+$/', $queryValue) ? 'order_number' : 'name'));
                    
                    // 遍历每条快递信息
                    foreach ($trackingInfoList as $index => $trackingInfo) {
                        $trackingNumber = $trackingInfo['tracking_number'];
                        $result = queryExpress($trackingNumber);
                        
                        if (!isset($result['error'])) {
                            saveQueryRecord($queryValue, $queryType, $result);
                        }
                        
                        // 显示快递信息卡片
                        echo '    <div class="bg-white rounded-xl shadow-md p-6 mb-6 border-l-4 border-primary card-hover cursor-pointer" data-card-index="' . $index . '">
                                <div class="result-card-header">
                                    <div class="delivery-info flex items-center mb-4">
                                        <div class="courier-icon bg-gradient-primary w-12 h-12 rounded-full flex items-center justify-center text-white text-xl mr-4">
                                            <i class="fas fa-shipping-fast"></i>
                                        </div>
                                        <div class="courier-details">
                                            <div class="courier-name font-semibold text-xl mb-1">';
                        
                        if (isset($result['error'])) {
                            echo '未知快递';
                        } else {
                            echo htmlspecialchars($result['result']['expName'] ?? '未知快递');
                        }
                        
                        echo '                        </div>
                                            <div class="tracking-number bg-light-gray px-3 py-1 rounded text-sm font-mono text-dark-gray">' . htmlspecialchars($trackingNumber) . '</div>
                                        </div>
                                    </div>';
                        
                        // 显示状态徽章
                        if (isset($result['error'])) {
                            echo '                    <div class="status-badge inline-flex items-center gap-2 bg-gray-100 text-dark-gray px-4 py-2 rounded-full text-sm font-semibold">
                                                <i class="fas fa-clock"></i> 查询失败
                                            </div>';
                        } else {
                            $status = $result['result']['deliverystatus'] == 3 ? 'delivered' : 
                                     ($result['result']['deliverystatus'] == 2 ? 'transit' : 'pending');
                            $statusText = $result['result']['deliverystatus'] == 3 ? '已签收' : 
                                          ($result['result']['deliverystatus'] == 2 ? '运输中' : '揽收中');
                            $statusIcon = $result['result']['deliverystatus'] == 3 ? 'check-circle' : 
                                         ($result['result']['deliverystatus'] == 2 ? 'truck' : 'clock');
                            $statusColor = $result['result']['deliverystatus'] == 3 ? 'bg-green-100 text-success' : 
                                          ($result['result']['deliverystatus'] == 2 ? 'bg-yellow-100 text-warning' : 'bg-gray-100 text-dark-gray');
                            
                            echo '                    <div class="status-badge inline-flex items-center gap-2 ' . $statusColor . ' px-4 py-2 rounded-full text-sm font-semibold">
                                                <i class="fas fa-' . $statusIcon . '"></i> ' . $statusText . '
                                            </div>';
                        }
                        
                        echo '                </div>
                                
                                <!-- 用户信息 -->
                                <div class="user-info grid grid-cols-1 md:grid-cols-3 gap-4 mb-6 p-4 bg-light-gray rounded-lg">
                                    <div class="info-item">
                                        <span class="info-label text-sm text-dark-gray mb-1 block">姓名</span>
                                        <span class="info-value font-semibold text-text-color">' . htmlspecialchars($trackingInfo['name'] ?: '-') . '</span>
                                    </div>
                                    <div class="info-item">
                                        <span class="info-label text-sm text-dark-gray mb-1 block">手机号</span>
                                        <span class="info-value font-semibold text-text-color">' . htmlspecialchars($trackingInfo['phone'] ?: '-') . '</span>
                                    </div>
                                    <div class="info-item">
                                        <span class="info-label text-sm text-dark-gray mb-1 block">订单号</span>
                                        <span class="info-value font-semibold text-text-color">' . htmlspecialchars($trackingInfo['order_number'] ?: '-') . '</span>
                                    </div>
                                </div>
                                
                                <!-- 物流信息 -->
                                <div class="tracking-info">
                                    <h4 class="font-semibold text-lg mb-4 text-text-color flex items-center">
                                        <i class="fas fa-history text-primary mr-2"></i> 物流时间线
                                    </h4>
                                    <div class="timeline relative pl-9">
                                        <div class="timeline-connector"></div>';
                        
                        if (isset($result['error'])) {
                            echo '                        <div class="timeline-item relative pb-6 opacity-0 animate-fadeInUp" style="animation-delay: 0s;">
                                                    <div class="timeline-dot"></div>
                                                    <div class="timeline-content bg-gray-100 p-4 rounded-lg relative">
                                                        <div class="timeline-arrow"></div>
                                                        查询失败: ' . $result['error'] . '
                                                    </div>
                                                </div>';
                        } else {
                            // 显示物流信息时间线
                            if (!empty($result['result']['list'])) {
                                $timelineItems = $result['result']['list'];
                                $timelineCount = count($timelineItems);
                                foreach ($timelineItems as $i => $item) {
                                    $delay = $i * 0.1;
                                    $isFirst = $i === 0;
                                    $dotClass = $isFirst ? 'timeline-dot timeline-dot-first' : 'timeline-dot';
                                    $contentClass = $i === 0 ? 'bg-primary/10' : 'bg-gray-100';
                                    echo '                        <div class="timeline-item relative pb-6 opacity-0 animate-fadeInUp" style="animation-delay: ' . $delay . 's;">
                                                    <div class="' . $dotClass . '"></div>
                                                    <div class="timeline-content ' . $contentClass . ' p-4 rounded-lg relative">
                                                        <div class="timeline-arrow"></div>
                                                        <div class="text-sm text-dark-gray mb-2">' . $item['time'] . '</div>
                                                        <div class="text-text-color">' . $item['status'] . '</div>
                                                    </div>
                                                </div>';
                                }
                            } else {
                                echo '                        <div class="timeline-item relative pb-6 opacity-0 animate-fadeInUp" style="animation-delay: 0s;">
                                                    <div class="timeline-dot"></div>
                                                    <div class="timeline-content bg-gray-100 p-4 rounded-lg relative">
                                                        <div class="timeline-arrow"></div>
                                                        暂无物流信息
                                                    </div>
                                                </div>';
                            }
                        }
                        
                        echo '                    </div>
                                </div>
                                
                                <!-- 查看更多/收起按钮 -->
                                <div class="mt-4 text-center">
                                    <button type="button" class="toggle-timeline bg-white border border-primary text-primary px-5 py-2 rounded-full text-sm font-medium btn-hover transition-colors hover:bg-primary hover:text-white">
                                        <i class="fas fa-chevron-down mr-1"></i> 查看完整物流
                                    </button>
                                </div>
                            </div>';
                    }
                }
            }
            ?>
        </div>

        <!-- 功能介绍区域 -->
        <div class="bg-white rounded-xl shadow-md p-6 mb-8">
            <h2 class="text-2xl font-bold mb-6 text-text-color text-center">系统功能介绍</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="feature-item p-5 rounded-lg bg-light-gray text-center card-hover">
                    <div class="feature-icon bg-primary/10 w-16 h-16 rounded-full flex items-center justify-center text-primary text-2xl mx-auto mb-4">
                        <i class="fas fa-search"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2 text-text-color">多方式查询</h3>
                    <p class="text-gray-600">支持通过姓名、手机号、订单号或快递单号等多种方式查询快递信息</p>
                </div>
                <div class="feature-item p-5 rounded-lg bg-light-gray text-center card-hover">
                    <div class="feature-icon bg-primary/10 w-16 h-16 rounded-full flex items-center justify-center text-primary text-2xl mx-auto mb-4">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2 text-text-color">实时更新</h3>
                    <p class="text-gray-600">实时获取最新物流状态，让您随时掌握快递动态</p>
                </div>
                <div class="feature-item p-5 rounded-lg bg-light-gray text-center card-hover">
                    <div class="feature-icon bg-primary/10 w-16 h-16 rounded-full flex items-center justify-center text-primary text-2xl mx-auto mb-4">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2 text-text-color">数据安全</h3>
                    <p class="text-gray-600">严格保护用户隐私，所有查询信息仅用于物流查询</p>
                </div>
            </div>
        </div>

        <!-- 使用帮助区域 -->
        <div id="help" class="bg-white rounded-xl shadow-md p-6 mb-8">
            <h2 class="text-2xl font-bold mb-6 text-text-color">使用帮助</h2>
            <div class="space-y-4">
                <div class="help-item p-4 rounded-lg bg-light-gray">
                    <h3 class="font-semibold text-lg mb-2 text-text-color">如何查询快递信息？</h3>
                    <p class="text-gray-600">在首页搜索框中输入您的姓名、手机号、订单号或快递单号，点击"立即查询"按钮即可获取物流信息。</p>
                </div>
                <div class="help-item p-4 rounded-lg bg-light-gray">
                    <h3 class="font-semibold text-lg mb-2 text-text-color">为什么查询不到我的快递信息？</h3>
                    <p class="text-gray-600">请检查您输入的信息是否正确，或者该快递可能尚未录入系统。如有疑问，请联系客服。</p>
                </div>
                <div class="help-item p-4 rounded-lg bg-light-gray">
                    <h3 class="font-semibold text-lg mb-2 text-text-color">如何更新我的个人信息？</h3>
                    <p class="text-gray-600">如需更新您的个人信息，请联系管理员进行修改。</p>
                </div>
            </div>
        </div>

        <!-- 联系我们区域 -->
        <div id="contact" class="bg-white rounded-xl shadow-md p-6">
            <h2 class="text-2xl font-bold mb-6 text-text-color">联系我们</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="contact-item p-4 rounded-lg bg-light-gray text-center">
                    <div class="contact-icon bg-primary/10 w-12 h-12 rounded-full flex items-center justify-center text-primary text-xl mx-auto mb-3">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <h3 class="font-semibold mb-1 text-text-color">邮箱</h3>
                    <p class="text-gray-600"><?php echo isset($settings['contact_email']) && !empty($settings['contact_email']) ? htmlspecialchars($settings['contact_email']) : 'support@example.com'; ?></p>
                </div>
                <div class="contact-item p-4 rounded-lg bg-light-gray text-center">
                    <div class="contact-icon bg-primary/10 w-12 h-12 rounded-full flex items-center justify-center text-primary text-xl mx-auto mb-3">
                        <i class="fas fa-phone-alt"></i>
                    </div>
                    <h3 class="font-semibold mb-1 text-text-color">电话</h3>
                    <p class="text-gray-600"><?php echo isset($settings['contact_phone']) && !empty($settings['contact_phone']) ? htmlspecialchars($settings['contact_phone']) : '400-123-4567'; ?></p>
                </div>
                <div class="contact-item p-4 rounded-lg bg-light-gray text-center">
                    <div class="contact-icon bg-primary/10 w-12 h-12 rounded-full flex items-center justify-center text-primary text-xl mx-auto mb-3">
                        <i class="fas fa-clock"></i>
                    </div>
                    <h3 class="font-semibold mb-1 text-text-color">工作时间</h3>
                    <p class="text-gray-600"><?php echo isset($settings['contact_hours']) && !empty($settings['contact_hours']) ? htmlspecialchars($settings['contact_hours']) : '周一至周五 9:00-18:00'; ?></p>
                </div>
            </div>
        </div>



    </main>

    <!-- 加载指示器 -->
    <div class="loader fixed inset-0 bg-white/80 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300" id="loader">
        <div class="loader-spinner w-16 h-16 border-4 border-gray-200 border-t-primary rounded-full animate-spin"></div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-8 mt-12">
        <div class="container mx-auto px-4">
            <div class="text-center">
                <div class="footer-logo text-xl font-semibold text-primary mb-4">订单自主查询系统</div>
                <div class="footer-links mb-6">
                    <a href="#help" class="text-gray-600 hover:text-primary mx-3 transition-colors">使用帮助</a>
                    <a href="#contact" class="text-gray-600 hover:text-primary mx-3 transition-colors">联系我们</a>
                </div>
                <div class="footer-copyright text-sm text-gray-500">© <?php echo date('Y'); ?> 慕念科技 版权所有</div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 添加动画关键帧
        const style = document.createElement('style');
        style.textContent = `
            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            
            .animate-fadeInUp {
                animation: fadeInUp 0.6s ease forwards;
            }
        `;
        document.head.appendChild(style);
        
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            const searchForm = document.querySelector('.search-form');
            const searchButton = document.getElementById('searchButton');
            const resultsSection = document.getElementById('resultsSection');
            const loader = document.getElementById('loader');
            const resultCards = document.querySelectorAll('.result-card');
            const toggleButtons = document.querySelectorAll('.toggle-timeline');
            
            // 检查是否有查询结果需要显示动画
            if (resultsSection.children.length > 0 && resultsSection.querySelector('.result-card, .bg-white')) {
                setTimeout(() => {
                    resultsSection.style.opacity = '1';
                    resultsSection.style.transform = 'translateY(0)';
                    
                    // 激活时间线动画
                    const timelineItems = document.querySelectorAll('.timeline-item');
                    timelineItems.forEach((item, index) => {
                        setTimeout(() => {
                            item.style.opacity = '1';
                        }, 100 * index);
                    });
                }, 300);
            }
            
            // 初始化结果区域样式
            resultsSection.style.opacity = '0';
            resultsSection.style.transform = 'translateY(20px)';
            resultsSection.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
            
            // 表单提交处理
            if (searchForm) {
                searchForm.addEventListener('submit', function(e) {
                    // 显示加载状态
                    loader.classList.remove('opacity-0', 'pointer-events-none');
                    searchButton.disabled = true;
                    
                    // 添加加载动画到按钮
                    const originalButtonText = searchButton.innerHTML;
                    searchButton.innerHTML = '<i class="fas fa-circle-notch fa-spin mr-2"></i> 查询中...';
                });
            }
            
            // 为结果卡片添加点击展开/收起功能
            resultCards.forEach(card => {
                card.addEventListener('click', function(e) {
                    // 如果点击的是切换按钮，不触发卡片点击事件
                    if (e.target.closest('.toggle-timeline')) {
                        return;
                    }
                    
                    const timeline = this.querySelector('.timeline');
                    const toggleBtn = this.querySelector('.toggle-timeline');
                    
                    if (timeline && toggleBtn) {
                        if (timeline.style.maxHeight === '500px') {
                            timeline.style.maxHeight = 'none';
                            toggleBtn.innerHTML = '<i class="fas fa-chevron-up mr-1"></i> 收起物流';
                        } else {
                            timeline.style.maxHeight = '500px';
                            toggleBtn.innerHTML = '<i class="fas fa-chevron-down mr-1"></i> 查看完整物流';
                        }
                        
                        // 添加过渡动画
                        timeline.style.transition = 'max-height 0.3s ease';
                    }
                });
            });
            
            // 为切换按钮添加点击事件
            toggleButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.stopPropagation(); // 阻止事件冒泡
                    
                    const card = this.closest('.result-card');
                    const timeline = card.querySelector('.timeline');
                    
                    if (timeline) {
                        if (timeline.style.maxHeight === '500px') {
                            timeline.style.maxHeight = 'none';
                            this.innerHTML = '<i class="fas fa-chevron-up mr-1"></i> 收起物流';
                        } else {
                            timeline.style.maxHeight = '500px';
                            this.innerHTML = '<i class="fas fa-chevron-down mr-1"></i> 查看完整物流';
                        }
                    }
                });
            });
            
            // 平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    
                    document.querySelector(this.getAttribute('href')).scrollIntoView({
                        behavior: 'smooth'
                    });
                    
                    // 点击链接后关闭移动端菜单
                    const mobileMenu = document.querySelector('.mobile-menu');
                    if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                    }
                });
            });
            
            // 移动端菜单显示/隐藏
            const mobileMenuButton = document.querySelector('.mobile-menu-button');
            const mobileMenu = document.querySelector('.mobile-menu');
            
            if (mobileMenuButton && mobileMenu) {
                mobileMenuButton.addEventListener('click', function() {
                    mobileMenu.classList.toggle('hidden');
                });
                
                // 点击菜单外部关闭菜单
                document.addEventListener('click', function(event) {
                    if (!mobileMenuButton.contains(event.target) && !mobileMenu.contains(event.target)) {
                        mobileMenu.classList.add('hidden');
                    }
                });
            }
        });
    </script>
</body>
</html>